<template>
	<view>
		<nav-bar leftIcon="left"></nav-bar>
		<view style="padding: 274rpx 30rpx 0 30rpx; width: 100vw;margin: 0;box-sizing: border-box;" class="content1">
			<text class="text">{{$t('修改密碼')}}</text>
			<text class="text1">{{$t('爲確保您的賬戶安全，在您更改密碼後，提現、C2C出售、支付 服務和幣安卡應用等功能將玻禁用24小時。')}}</text>
			<view class="old">
				<input class="old-ipt" v-model="oldpassword" :type="isShow" :placeholder="$t('請輸入舊密碼')">
				<view>
					<image @click="cutType('password')" v-if="isShow==='text'" src="@/assets/login/zy.png"
						class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</view>
			</view>
			<view class="old">
				<input class="old-ipt" v-model="newpassword" :type="isShow" :placeholder="$t('請輸入新密碼')">
				<view>
					<image @click="cutType('password')" v-if="isShow==='text'" src="@/assets/login/zy.png"
						class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</view>
			</view>
			<view class="old">
				<input class="old-ipt" v-model="againpassword" :type="isShow" :placeholder="$t('請確認密碼')">
				<view>
					<image @click="cutType('password')" v-if="isShow==='text'" src="@/assets/login/zy.png"
						class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</view>
			</view>
			<view class="submit" @click="changePassword">
				{{$t('确认')}}
			</view>
		</view>

	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import HInput from '@/components/h-input.vue'
	import api from '@/hooks/safety.js'
	import i18n from '@/locale/index'
	const { changePasswordApi } = api()
	const isShow = ref('password')
	const newpassword = ref('')
	const oldpassword = ref('')
	const againpassword = ref('')

	//修改input密码状态
	function cutType(val) {
		isShow.value = val
	}

	async function changePassword() {
		if (!newpassword.value || !oldpassword.value || !againpassword.value) return uni.showToast({
			title: `${i18n.global.t('請完善信息')}`,
			icon: 'none',
		})
		if (newpassword.value !== againpassword.value) return uni.showToast({
			title: `${i18n.global.t('密碼不一致')}`,
			icon: 'none',
		})
		const res = await changePasswordApi('/user/changePassword', {
			userId: uni.getStorageSync('setUserInfo').userId,
			oldPassWord: oldpassword.value,
			passWord: newpassword.value
		})
		uni.showToast({
			title: `${i18n.global.t('修改成功！')}`,
			icon: 'none',
		})
		uni.switchTab({
			url: '/pages/my/my'
		})
	}
</script>

<style lang="scss" scoped>
	.text {
		display: block;
		font-size: 42rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 9rpx;
	}

	.text1 {
		display: block;
		font-size: 24rpx;
		font-weight: 300;
		color: #848686;
		line-height: 38rpx;
		margin-top: 40rpx;
		margin-bottom: 100rpx;
	}

	.inpIcon {
		width: 35rpx;
		height: 30rpx;
		margin-left: 15rpx;
	}

	.submit {
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #039BDA, #0DF2ED);
		border-radius: 45rpx;
		margin-top: 57rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
	}

	.old {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 100rpx;
		background: #071A22;
		border-radius: 15rpx;
		padding: 0 25rpx;
		color: #FFFFFF;
		margin-top: 57rpx;

		.old-ipt {
			width: 100%;
		}
	}
</style>